<script setup>
import PageTitle from '@/components/pageTitle/pageTitle.vue';
import { useRoute } from 'vue-router'
import { onBeforeMount, ref } from 'vue'

const route = useRoute();
const doctorId = ref(route.query.docId);
const doctorName = ref(route.query.name);
const classify = `医师问诊 -宠物科-${doctorName.value}`;

const docData = ref({
    "name": "王医生",
    "title": "首席宠物医师",
    "department": "宠物科",
    "hospital": "重庆萌济医院"
});

onBeforeMount(() => {
    
});
</script>

<template>
    <PageTitle :classify="classify" />
    <div class="content">
        <div class="doctor-info">
            <img src="@/assets/images/aboutDoctorPage/touxiang.png">
            <div class="doctor-info-content">
                <span class="docName">{{ doctorName }}</span>
                <span class="docTitle">{{ docData.title }}</span>
                <span class="docDepartment">{{ docData.department }}</span>
                <span class="docHospital">{{ docData.hospital }}</span>
            </div>
        </div>
        <div class="conversation">
            <img class="background" src="/src/assets/images/onlineAsk/backimage.png">
        </div>
        <div class="input">
            <img class="icon" src="/src/assets/images/onlineAsk/语音.png">
            <input type="text" placeholder="请输入您的问题">
            <img class="icon" src="/src/assets/images/onlineAsk/笑脸.png">
            <img class="icon" src="/src/assets/images/onlineAsk/加.png">
        </div>
    </div>
    </template>

<style lang="scss" scoped>
.doctor-info {
    display: flex;
    align-items: center;
    padding: 10px;
    background: rgba(192, 223, 124, 0.75);
    border-radius: 10px;
    img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 15px;
    }
    .doctor-info-content {
        flex-grow: 1;
        .docName {
            font-size: 18px;
            font-weight: bold;
        }
        .docTitle,
        .docDepartment,
        .docHospital {
            font-size: 14px;
            color: #333;
        }
    }
}

.conversation {
    padding: 20px;
    text-align: center;
    .background {
        width: 100%;
        max-width: 600px;
        border-radius: 10px;
    }
}

.input {
    display: flex;
    align-items: center;
    background-color: rgb(242, 242, 236);
    padding: 10px;
    border-radius: 10px;
    .icon {
        width: 24px;
        height: 24px;
        margin: 0 10px;
    }
    input {
        height: 30px;
        flex-grow: 1;
        border-radius: 10px;
        background-color: rgb(251, 253, 255);
        border: 1px solid #ccc;
        padding: 0 10px;
    }
}
</style>